<template>
	<view class="apply-item">
		<view class="box">
			<view class="left">
				<view class="applicant">昵称：{{nickname}}</view>
				<button size="mini" type="primary" @click="leftShowDrawer('showLeft')">申请信息</button>
				<uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">
					<view class="close">
						<button @click="leftCloseDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>
						<view class="nickname">昵称：{{nickname}}</view>
						<view class="teacherName">讲师名称：{{apply.name}}</view>
						<view class="teacherName">申请时间：{{apply.applyTime}}</view>
						<view class="avatar">
							<view class="name">讲师照片</view>
							<image :src="apply.avatar" mode="aspectFill"></image>
						</view>
						<view class="level" v-if="apply.level==0">讲师级别：高级讲师</view>
						<view class="level" v-if="apply.level==1">讲师级别：首席讲师</view>
						<view class="mobile">联系方式：{{apply.mobile}}</view>
						<view class="email">邮箱：{{apply.email}}</view>
						<view class="career">
							<view>讲师资历：</view>
							<text class="career-content">
								{{apply.career}}
							</text>
						</view>
						<view class="intro">
							<view>讲师简介：</view>
							<text class="intro-content">
								{{apply.intro}}
							</text>
						</view>
					</view>
				</uni-drawer>
			</view>
			<view class="right">
				<view class="status" v-if="apply.checkStatus=='0'" style="color: #409eff">待审核</view>
				<view class="status" v-if="apply.checkStatus=='1'" style="color: #67c23a">审核通过</view>
				<view class="status" v-if="apply.checkStatus=='2'" style="color: red">未通过</view>
				<button size="mini" type="primary" @click="rightShowDrawer('showRight')" v-if="!(apply.checkStatus=='0')">审核结果</button>
				<uni-drawer ref="showRight" mode="right" :width="320" @change="change($event,'showRight')">
					<view class="close">
						<button @click="rightCloseDrawer('showRight')"><text class="word-btn-white">关闭Drawer</text></button>
						<view class="status" v-if="apply.checkStatus=='0'" style="color: #409eff">待审核</view>
						<view class="status" v-if="apply.checkStatus=='1'" style="color: #67c23a">审核通过</view>
						<view class="status" v-if="apply.checkStatus=='2'" style="color: red">未通过</view>
						<view class="intro">
							<view>审核内容：</view>
							<text class="intro-content">
								{{apply.checkContent}}
							</text>
						</view>
					</view>
				</uni-drawer>
			</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		apply:{
			
		},
		nickname:''
	})
	const showLeft = ref(false)
	const showRight = ref(false)
	const leftShowDrawer = () => {
		showLeft.value.open()
	}
	const rightShowDrawer = () => {
		showRight.value.open()
	}
	const leftCloseDrawer = () => {
		showLeft.value.close()
	}
	const rightCloseDrawer = () => {
		showRight.value.close()
	}
	const change = (e, type) => {
		console.log(e, type)
	}
</script>

<style lang="scss" scoped>
	.apply-item {
		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			// padding: 20rpx;
			border-bottom: 1rpx solid #ccc;

			.left {
				.applicant {
					margin-bottom: 10rpx;
					color: #666;
				}

				button {
					background: #67c23a;
				}

				.close {
					padding: 30rpx;
					button {
						background: #f56c6c;
					}
					view{
						margin: 50rpx 0;
					}
					.avatar{
						view{
							margin: 20rpx 0;
						}
						image{
							width: 300rpx;
							height: 300rpx;
						}
					}
					.intro,.career{
						view{
							margin: 20rpx 0;
						}
					}
				}
			}

			.right {
				.status {
					margin-bottom: 10rpx;
					color: #666;
				}

				button {
					background: #67c23a;
				}
				.close {
					padding: 30rpx;
				
					button {
						background: #f56c6c;
					}
					view{
						margin: 20rpx 0;
					}
				}
			}
		}
	}
</style>